<template>
    <div>
        <Button type="primary" @click="newSite">新增场地</Button>
        <Divider/>
        <Table border :loading="loading" :columns="columns" :data="data"></Table>
        <editBookingSetting :model="editBookingModel" :id="siteId"></editBookingSetting>
        <bookingSetting :model="bookingSettingModel" @refreshList="test"></bookingSetting>
    </div>
</template>
<script>
    import {getMySite,deleteSite} from '../../api/manager'
    import bookingSetting from '../bookingsetting/bookingsetting'
    import editBookingSetting from '../bookingsetting/editbookingsetting'
    export default {
        data() {
            return {
                columns: [
                    {
                        title: '编号',
                        key: 'id',
                        width:80,
                        align: 'center',
                        fixed: 'left'
                    },
                    {
                        title: '缩略图',
                        key: 'img_url',
                        align: 'center',
                        width:80,
                        render: (h, params) => {
                            return h('div', [
                                h('Avatar', {
                                    props: {
                                        src:params.row.img_url,
                                        size: 'large',
                                        shape:'square'
                                    }

                                })
                            ]);
                        }
                    },
                    {
                        title: '场地名称',
                        key: 'name',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'person'
                                    }
                                }),
                                h('strong', params.row.name)
                            ]);
                        }
                    },
                    {
                        title: '简介',
                        key: 'desc'
                    },
                    {
                        title: '地址',
                        key: 'address'
                    },
                    {
                        title: '提示',
                        key: 'note'
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 150,
                        align: 'center',
                        fixed: 'right',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            // this.edit(params.row.id)
                                            this.editBookingModel = true
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.$Modal.confirm({
                                                title: '警告⚠️',
                                                content: '<p>点击确定此数据将会删除</p>',
                                                loading: true,
                                                onOk: () => {
                                                    deleteSite(params.row.id).then(res => {
                                                        this.$Modal.remove();
                                                        if (res.code === 0){
                                                            this.$Message.info('删除成功');
                                                            this.init()
                                                        } else {
                                                            this.$Message.error('删除失败');
                                                        }
                                                    })
                                                }
                                            });
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                data: [],
                loading:true,
                editBookingModel:false,
                bookingSettingModel:false,
                siteId:0
            }
        },
        components:{
            bookingSetting,
            editBookingSetting
        },
        methods: {
            edit(index) {
                this.$router.push({
                    name: 'editbookingsetting',
                    query: {
                        type: 'edit',
                        id:index
                    }
                })
            },
            remove(index) {
                this.data.splice(index, 1);
            },
            newSite() {
                this.$router.push({
                    name: 'bookingsetting',
                    query: {
                        type: 'new'
                    }
                })
            },
            init(){
                getMySite().then(res => {
                    this.loading = false
                    if (res.code === 0){
                        this.data = res.data
                    }
                })
            }
        },
        created(){
            this.init();
        }
    }
</script>

<style scoped>

</style>
